{% extends 'common/base.html' %}
{% block title %}
    首页
{% endblock %}

{% block page_content %}

    <style type="text/css">
        a {
            color: white;
            text-decoration: none;
            font-size: 15px;
        }

        a:hover {
            color: white;
            text-decoration: none;
        }

        a:link {
            color: white;
            text-decoration: none;
        }

        a:visited {
            color: white;
            text-decoration: none;
        }

        .mynewcontent {
            width: 100%;
            background-color: #337AB7;
            border-radius: 5px;
            overflow: hidden;
            padding: 10px;
        }

        .mypost {
            width: 90%;
            float: left;
        }

        .usericon {
            width: 10%;
            float: right;
        }

        .postcontent {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-top: 0;
        }

        .newpostcont {
            overflow: hidden;
        }

        .mybutton {
            float: left;
            cursor: pointer;
        }

        .username {
            float: right;
        }
    </style>

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10" style="text-align: center">
            {{ wtf.quick_form(form) }}
            <br>
            <div class="mycontent" style="width: 100%;height: 100%;text-align: left;">
                {% for post in posts %}
                    <div class="mynewcontent">
                        <div style="overflow: hidden;">
                            <a href="#" class="mypost">
                                <p class="postcontent">
                                    {{ post.content }}
                                </p>
{#                                {{ moment(post.timestamp).format('LLL') }}#}
                                <p class="posttime" style="float: right">发帖时间：{{ moment(post.timestamp).fromNow() }}</p>
                            </a>
                            <div class="usericon">
                                <img src="{{ url_for('static',filename='upload/'+post.user.icon) }}"
                                     style="width: 64px;"/>
                            </div>
                        </div>
                        <div class="newpostcont">
                            <div class="mybutton" style="color: white;">回复</div>
                            <a href="#" class="username">
                                <div>发帖人：{{ post.user.username }}</div>
                            </a>
                        </div>
                        <div class="huifuinput" style="display: none;">
                            {#                            {{ url_for('user.reply') }}#}
                            <form action="{{ url_for('user.reply') }}" method="post" onsubmit="return ajaxForm()">
                                <textarea rows="3" cols="20" class="rtext" placeholder="请输入回复内容..." style="width: 60%;"></textarea><br>
                                <input type="submit" class="mysubmit" value="回复"/>
                            </form>
                        </div>
                    </div>
                    <br>
                {% endfor %}
            </div>
            {#          分页导航条存放的位置            #}
            {{ pagination_show(pagination,'main.index') }}
        </div>
        <div class="col-md-1"></div>
    </div>

{% endblock %}
{% block scripts %}
    {{ super() }}
    <script type="text/javascript">
        var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};
        $(function () {
            $('.mybutton').click(function () {
                var mybf = $(this).parent()
                var myn = mybf.next()
                var myfd = myn.css('display')
                {#					console.log(myfd)#}
                if (myfd == 'none') {
                    myn.css('display', 'block');
                } else {
                    myn.css('display', 'none');
                }
            })
            $('.mysubmit').click(function () {
                {#                    获取评论的用户id#}
                var brid = $(this).parent().parent().parent();
                var ss = brid.children('.newpostcont');
                var myneed = ss.children('.username');
                {#                     获取评论内容#}
                var p = $(this).parent();
                var pt = p.children('.rtext');
                {#                      将内容准备#}
                var usern = myneed.children().html()
                var userr = pt.val()
                console.log(usern, userr);
                {#                    存储为json数据#}
                var data = {
                    'b_user': usern,
                    're_text': userr,
                }
            });
            function ajaxForm() {
                $.ajax({
                    type: 'POST',
                    url: $SCRIPT_ROOT + '/user/reply' ,
                    data: data,
                    dataType: 'json',
                    error: function (XMLResponse) {
                        alert(XMLResponse.responseText)
                    },
                    success: function (data, textStatus) {
                        $("#name").text(data.name);
                    }
                })
            }
        })
    </script>
{% endblock %}